page {
  position: relative;

  background-color: #f6fafd;

  display: grid;
  grid-template-rows: repeat(auto-fill, min-content);
  row-gap: 10px;
  place-items: center;

  padding: 10px 0 46px;

  .no-bonuses-tip {
    position: absolute;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;
    background-color: #fff;

    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 41.8667vw;
    row-gap: 14px;

    .img {
      width: 69px;
      height: 69px;
    }

    .text {
      font-size: 16px;
      text-align: center;
      color: #8d8d8d;

      .emphasis {
        // color: #f04465;
      }
    }
  }

  .bonuses-item {
    width: 94.6667vw;
    background: #ffffff;
    border-radius: 4px;

    display: grid;
    grid-template:
      'icon name use-btn .' min-content
      'icon valid-time use-btn .' min-content
      '. . . .' 12px
      'hr hr hr hr' 1px
      'remark remark remark remark' 44px
      /48px 1fr 64px 20px;
    column-gap: 8px;
    padding: 16px 10px 12px 10px;
    place-items: center;

    position: relative;
    overflow: hidden;

    &.with-amount {
      grid-template:
        'icon name amount .' 1fr
        'icon valid-time use-btn .' 1fr
        '. . . .' 12px
        'hr hr hr hr' 1px
        'remark remark remark remark' 44px
        /48px 1fr 64px 20px;
    }

    .icon {
      grid-area: icon;
      width: 48px;
      height: 48px;
      border-radius: 4px;
    }

    .name {
      grid-area: name;
      justify-self: start;
      font-size: 14px;
      color: #333333;
    }

    .amount {
      grid-area: amount;
      transform: translateX(-5px);
      font-size: 16px;
      color: #f04465;
    }

    .valid-time {
      grid-area: valid-time;
      justify-self: start;
      font-size: 12px;
      color: #8d8d8d;
    }

    .btn {
      grid-area: use-btn;
      width: 64px;
      height: 24px;
      border-radius: 35px;

      display: flex;
      align-items: center;
      justify-content: center;

      font-size: 12px;

      // 联系客服
      &.custom {
        background: rgba(240, 68, 101, 0.1);
        border: 1px solid #f04465;
        color: #f04465;
      }

      // 立即使用
      &.createActivity,
      &.yh,
      &.gtp {
        background: #f04465;
        color: #ffffff;
      }

      // 「去提现」
      &.appTx {
        background-color: #44a8f0;
        color: #fff;
      }

      // 禁用状态
      &.disabled {
        background: #dddddd;
        border: 1px solid #8d8d8d;
        color: #8d8d8d;
      }
    }

    .hr {
      grid-area: hr;
      height: 1px;
      width: 335px;
      background: #f6fafd;
    }

    .remark {
      grid-area: remark;
      font-size: 14px;
      color: #8d8d8d;
    }

    .level-text {
      position: absolute;
      top: 0;
      right: 0;
      transform: translate(15px, 8px) rotate(30deg);

      width: 24vw;
      height: 4.5333vw;
      background-color: #feedf0;

      display: flex;
      align-items: center;
      justify-content: center;

      font-size: 10px;
      color: #f04465;
    }
  }
}
